<template>
    <div class="bg-div">
        <div class="title-div">学习资料爬虫大屏</div>
        <div class="time-div">{{ time }}</div>
        <div class="but-div">
            <img src="./assets/img/return.png" loading="lazy" class="return-div"/>
            <div class="return-font" @click="goToBack">返回</div>
        </div>

        <div class="flexble pd-div">
            <div class="left">
                <div class="left-title">
                    <img src="./assets/img/tl.png" loading="lazy" class="san-div">
                    <a class="title-a">课程人数概览</a>
                    <img src="./assets/img/tr.png" loading="lazy" class="san-div">
                </div>

                <div class="title-bg">
                    课程资产统计
                </div>

                <div class="number-container">
                    <div class="number-font">
                        总教师数: <span class="number-value">{{ teacherCount }}</span>人
                    </div>

                    <div class="number-font-right">
                        总课程数: <span class="number-value">{{ classCount }}</span>课
                    </div>

                    <div class="number-font">
                        总章节数: <span class="number-value">5023</span>章
                    </div>

                    <div class="number-font-right">
                        总资源数: <span class="number-value">{{ resourceCount }}</span>个
                    </div>
                </div>


                <div class="title-bg">
                    教师课程排名
                </div>
                <div class="echarts-container">
                    <div id="echarts1" class="div-echarts"></div>
                </div>


                <div class="title-bg">
                    课程资源洞察
                </div>
                <div class="echarts-container2">
                    <div id="echarts2" class="div-echarts"></div>
                    <div id="echarts3" class="div-echarts"></div>
                </div>
            </div>
            <div class="center">
                <div class="map">
                    <MapContainer></MapContainer>
                </div>
            </div>
            <div class="right">
                <div class="searchList">
                    <div class="title-bg2">
                        教师课程检索
                    </div>
                    <div class="searchText">
                        <el-input
                                v-model="input2"
                                class="w-50 m-2"
                                placeholder="输入教师名称(可以为模糊搜索)"
                                :prefix-icon="Search"
                        />
                        <el-button @click="searchTeacher(1,input2)" type="primary">搜索</el-button>
                    </div>


                    <div class="list">
                        <el-table @row-click="getResourceDialog" :data="tableData" style="width: 100%">
                            <el-table-column prop="courseId" label="课程ID" width="100"/>
                            <el-table-column prop="courseName" label="课程名称" width="150"/>
                            <el-table-column prop="teacherName" label="教师名称"/>
                        </el-table>

                        <div class="example-pagination-block page">
                            <el-pagination @update:current-page="changePage" :total="pageData.total" :page-sizes="6" background small layout="prev, pager, next" />
                        </div>
                    </div>
                </div>
                <div class="test">
                    <div class="title-bg2">
                        资源可视化获取
                    </div>
                    <div class="echarts-container2">
                        <ResourceDialog></ResourceDialog>
                        <div id="echarts4" class="div-echarts" style="color: red">正在开发</div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import * as echarts from 'echarts';
import 'echarts-wordcloud'
import MapContainer from "@/views/MapContainer.vue";
import {Calendar, Search} from '@element-plus/icons-vue'
import {
    getMaxTypeCount,
    selectCourseNameCount, selectPage, selectPageByTeacherName,
    selectResourceCount,
    selectTeacherClassCount,
    selectTeacherCount, selectWordCloud
} from "@/api/ScreenApi";
import ResourceDialog from "@/views/ResourceDialog.vue";


// 114.513589,37.972579
// 114.529589,37.983265
export default {
    name: 'HomeView',
    computed: {
        Search() {
            return Search
        },
        option1() {
            return {
                color: "rgba(95,199,44,0.8)",
                grid: {
                    show: true,
                    left: "10%",
                    right: "5%",
                    top: 30,
                    bottom: "15%"
                },
                xAxis: {
                    type: 'category',
                    data: this.teacherClassCount.map(obj => obj.teacher_name)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.teacherClassCount.map(obj => obj.cnt),
                        type: 'bar',
                        backgroundStyle: {
                            color: "rgba(136, 70, 70, 1)"
                        }
                    }
                ]
            };
        },
        option2() {
            return {
                tooltip: {
                    trigger: 'item'
                },
                title: {
                    text: "资源类型分布",
                    textStyle: {
                        color: "#42b983"
                    },
                    left: "center"
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: true,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            color: "white   ",
                            show: true,
                            position: "inside"
                        },
                        data: this.maxTypeCount.map(data => {
                            return {
                                "name" : data.type,
                                "value" : data.count
                            }
                        })
                    }
                ]
            }
        }


    },
    components: {ResourceDialog, MapContainer},
    data() {
        return {
            pageData:{},
            classCount: 0,
            teacherCount: 0,
            resourceCount: 0,
            teacherClassCount: [],
            maxTypeCount: [],
            time: "2023-11-25",
            input2: "",
            pageSize: 6,
            teacherName:"",
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: '正在开发',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: '正在开发',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: '正在开发',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: '正在开发',
                },
            ]

        }
    },

    mounted() {
        this.getCourseNameCount();
        this.getTeacherCount();
        this.getResourceCount();
        this.getTeacherClassCount();
        this.getRealMaxTypeCount();
        this.getWordCloud();
        this.getCoursePage(1,6);
    },

    methods: {

        async getCourseNameCount() {
            const nameCount = await selectCourseNameCount();
            this.classCount = nameCount;
        },
        async getTeacherCount() {
            const teacherCount = await selectTeacherCount();
            this.teacherCount = teacherCount;
        },
        async getResourceCount() {
            const resourceCount = await selectResourceCount();
            this.resourceCount = resourceCount;
        },
        async getTeacherClassCount() {
            const teacherClassCount = await selectTeacherClassCount();
            this.teacherClassCount = teacherClassCount;
            console.log(teacherClassCount);

            this.getNumberTrend();
        },
        async getRealMaxTypeCount() {
            const maxTypeCount = await getMaxTypeCount();
            this.maxTypeCount = maxTypeCount;
            console.log(maxTypeCount);
            this.getZhangJiePieData();
        },
        async getWordCloud() {
            const wordCloud = await selectWordCloud();
            this.wordCloud = wordCloud;
            console.log(wordCloud);
            this.getWordCloudData();
        },
        getNumberTrend() {
            let myChart = echarts.init(document.getElementById('echarts1'));
            let option = this.option1;
            myChart.setOption(option);
        },
        getZhangJiePieData() {
            let myChart2 = echarts.init(document.getElementById('echarts2'));
            let option2 = this.option2;
            myChart2.setOption(option2)

        },
        getWordCloudData() {
            let myChart3 = echarts.init(document.getElementById('echarts3'));
            let option = {
                title: {
                    text: '词云展示',
                    link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'),
                    x: 'left',
                    textStyle: {
                        fontSize: 23,
                        color: 'rgba(255, 255, 255, 0.8)'
                    }

                },
                backgroundColor: '#131f56',
                tooltip: {
                    show: true
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {
                //             iconStyle: {
                //                 normal: {
                //                     color: '#FFFFFF'
                //                 }
                //             }
                //         }
                //     }
                // },
                series: [{
                    name: '热点分析',
                    type: 'wordCloud',
                    // size: ['9%', '99%'],
                    // sizeRange: [6, 66],//最小文字——最大文字
                    // textRotation: [0, 45, 90, -45],
                    // rotationRange: [-45, 90],//旋转角度区间
                    // rotationStep: 90,//旋转角度间隔
                    // shape: 'circle',
                    // gridSize: 10,//字符间距
                    textPadding: 0,
                    autoSize: {
                        enable: true,
                        minSize: 6
                    },
                    textStyle: {
                        normal: {
                            color: function() {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 105)+150,
                                    Math.round(Math.random() * 105)+150,
                                    Math.round(Math.random() * 105)+150
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: this.wordCloud.map(data => {
                        return {
                            "name" : data.word,
                            "value" : data.count
                        }
                    })
                }]
            };


            myChart3.setOption(option)
        },
        async getCoursePage(page,pageSize){
            this.pageData = await selectPage(page,pageSize)
            console.log(this.pageData)
            this.tableData = this.pageData.data
        },
        async changePage(page){
            console.log(page)
            this.pageData = await selectPageByTeacherName(page,this.pageSize,this.teacherName)
            console.log(this.pageData)
            this.tableData = this.pageData.data
            this.total = this.pageData.total
        },

        async searchTeacher(page,teacherName) {
            console.log(page)
            this.pageData = await selectPageByTeacherName(page,this.pageSize,teacherName)
            this.teacherName = teacherName
            console.log(this.pageData)
            this.tableData = this.pageData.data
            this.total = this.pageData.total
        },
        getResourceDialog(row) {
            console.log(row.courseId)
        }
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bg-div {
    /*指定背景url*/
    background: url("./assets/img/back.png");
    /*占满窗口的100% ,如果长宽比不适应会变形*/
    background-size: 100% 100%;
    /*宽度 为可视窗口的100% */
    width: 100vw;
    /*高度 为可视窗口的100% */
    height: 100vh;
    /*当指定size时，如果没有指定box-sizing: border-box,将会超过本来的大小*/
    box-sizing: border-box;
    /*外边距10px*/

}

.title-div {
    /*居中显示*/
    text-align: center;
    /*指定颜色*/
    color: #56D5FF;
    /*指定字体厚度*/
    font-weight: 400;
    /*指定字体大小*/
    font-size: 36px;
    /*指定字体*/
    font-family: YouSheBiaoTiHei;
}

.time-div {
    font-size: 16px;
    font-family: YouSheBiaoTiHei;
    color: #00B4FF;
    position: absolute;
    right: 150px
}

.but-div {
    /*设置背景*/
    background: url("./assets/img/but-gb.png") no-repeat;
    /*设置图片的显示方式*/
    background-size: 100% 100%;
    /*设置图片的大小*/
    width: 75px;
    height: 30px;
    /*字体大小*/
    font-size: 14px;
    font-family: YouSheBiaoTiHei;
    color: #00B4FF;

    /*根据父元素绝对定位*/
    position: absolute;
    /*从右侧偏移60px*/
    right: 60px;

    cursor: pointer;
    /*子元素采用flex*/
    display: flex;
}

.return-div {
    margin-top: 8px;
    margin-left: 10px;
    width: 18px;
    height: 17px;
}

.return-font {
    margin-top: 7px;
    margin-left: 5px;
}

.flexble {
    display: flex;
}

.pd-div {
    padding: 4.6vh 35px 0px 3.2vh;
}

.san-div {
    margin-left: 10px;
    margin-right: 10px;
    width: 30px;
    height: 11px;
}

.left {

}

.left-title {
    text-align: center;
}

.title-a {
    font-size: 28px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 42px;
    background: linear-gradient(180deg, #BDF0FF 0%, #2998D6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-bg {
    margin-top: 0.925vh;
    margin-bottom: 0.925vh;
    background: url("./assets/img/title-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 461px;
    height: 42px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 42px;
    box-sizing: border-box;
    padding-left: 30px;

}

.div-echarts {
    height: 25.5vh;
}

.echarts-container {
    box-sizing: border-box;
    border: 1px solid rgba(0, 180, 255, 0.5);
    border-radius: 5px;
    background-color: rgba(1, 18, 58, 0.8);
}

.number-container {
    font-family: YouSheBiaoTiHei;
    color: #00B4FF;
    font-size: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.number-font {
    margin-top: 10px;
}

.number-font-right {
    margin-top: 10px;

}

.number-value {
    font-size: 30px;
    color: #42b983;
}

.echarts-container2 {
    box-sizing: border-box;
    border: 1px solid rgba(0, 180, 255, 0.5);
    border-radius: 5px;
    background-color: rgba(1, 18, 58, 0.8);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.map {
}

.searchList {
    width: 400px;
    height: 500px;
    display: flex;
    flex-direction: column;
}

.title-bg2 {
    margin-top: 0.925vh;
    margin-bottom: 0.925vh;
    background: url("./assets/img/title-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 400px;
    height: 42px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 42px;
    box-sizing: border-box;
    padding-left: 30px;
}

.searchText {
    display: flex;
    gap: 10px
}

.list {
    margin-top: 10px;
    border: 2px solid rgba(0, 180, 255, 0.5);
    height: 100%;
    border-radius: 5px;
    position: relative;
}

/*.el-table thead tr {*/
/*    background: rgb(5, 66, 171) !important;*/
/*    background: linear-gradient(90deg, rgba(5, 66, 171, 1) 62%, rgba(0, 102, 255, 1) 100%);*/
/*}*/

/*.el-table__row {*/
/*    background: rgb(5, 66, 171);*/
/*    color: #42b983;*/
/*    background: linear-gradient(90deg, rgba(5, 66, 171, 1) 62%, rgba(0, 102, 255, 1) 100%);*/
/*}*/

.page {
    position: absolute;
    bottom: 10px;
    width: 100%;
}
.el-pagination__total{
    color: blueviolet;

}
</style>
